import React, { forwardRef, useEffect, useState } from 'react'
import { StyledMenuWrap } from './style'
import { useUserAllStore } from './all/store'
import { t } from 'i18next'
import { useUserOftenStore } from './often/store'
import { useUserInteractiveStore } from './interactive/store'
import { ITab, useCreateContentStore } from '../../store'
import { useBasicInfoStore } from '../basicInfo/store'
import { useMeetingParamsStore } from '../meetingParams/store'
import {
	addCheckedFromAllTree,
	addToList,
	removeCheckedInAll,
	removeCheckedInSimple,
	toggleCheckedAllInAll,
	toggleCheckedAllInSimple,
} from './store.combine'
import { useGlobalStore } from '@/store/global'

export interface MenuProps {
	tab: 'all' | 'often' | 'interactive'
	onCancel: () => void
}

const TAB_LABEL: { [key: string]: string } = {
	basic: t('添加到VIP列表'),
	params: t('添加到追呼列表'),
	vmp: t('添加到轮询方列表'),
	poll: t('添加到轮询列表'),
	mix: t('添加到混音列表'),
	tvwall: t('添加到轮询方列表'),
	vl: t('添加到直播列表'),
	dcs: t('添加到协作方列表'),
	ai: '',
}

interface IMenu {
	id: string
	canShow: boolean
	label: string
	type?: ITab
}

export const Menu = forwardRef((props: MenuProps, ref: any) => {
	const { tab, onCancel, ...restProps } = props

	const [menu, setMenu] = useState<IMenu[]>([
		{
			id: 'setList',
			canShow: true,
			label: t('设为常用终端'),
		},
		{
			id: 'addTo',
			canShow: true,
			label: t('添加到VIP列表'),
			type: 'basic',
		},
		{
			id: 'delete',
			canShow: true,
			label: t('删除'),
		},
		{
			id: 'select',
			canShow: true,
			label: t('全选'),
		},
	])

	const tree = useUserAllStore((state) => state.tree)
	const often = useUserOftenStore((state) => state.list)
	const interactive = useUserInteractiveStore((state) => state.list)
	const outTab = useCreateContentStore((state) => state.tab)
	const superMtNum = useBasicInfoStore((state) => state.superMtNum)
	const meetingType = useMeetingParamsStore((state) => state.meetingType)
	const SWITCH = useGlobalStore((state) => state.SWITCH)

	useEffect(() => {
		let _menu = menu
		if (superMtNum) {
			if (tab === 'all') _menu[0].label = t('设为互动终端')
			if (tab === 'interactive') _menu[0].label = t('取消互动终端')
		} else {
			if (SWITCH.showOftenMt) {
				if (tab === 'all') _menu[0].label = t('设为常用终端')
				if (tab === 'often') _menu[0].label = t('取消常用终端')
			} else {
				_menu[0].canShow = false
			}
		}
		//全选，只管顶级，不管下级
		if (tab === 'all') {
			const flag = tree.filter((a) => a.status.checked).length === tree.length && tree.length > 0
			_menu[3].label = flag ? t('取消全选') : t('全选')
		} else if (tab === 'often') {
			const flag = often.filter((a) => a.status.checked).length === often.length && often.length > 0
			_menu[3].label = flag ? t('取消全选') : t('全选')
		} else {
			const flag =
				interactive.filter((a) => a.status.checked).length === interactive.length && interactive.length > 0
			_menu[3].label = flag ? t('取消全选') : t('全选')
		}
		_menu[1].label = TAB_LABEL[outTab]
		_menu[1].type = outTab

		if (meetingType === 2) {
			if (outTab === 'basic' || outTab === 'params' || outTab === 'vmp') {
				_menu[1].canShow = false
			} else {
				_menu[1].canShow = true
			}
		} else {
			_menu[1].canShow = true
		}

		setMenu([..._menu])
	}, [tree, often, interactive, outTab, superMtNum, meetingType, tab, SWITCH])

	const handleClick = (m: IMenu) => {
		switch (m.id) {
			case 'setList':
				if (tab === 'all') {
					addCheckedFromAllTree()
				} else {
					removeCheckedInSimple()
				}
				break
			case 'addTo':
				addToList({ type: m.type!, tab })
				break
			case 'delete':
				if (tab === 'all') {
					removeCheckedInAll()
				} else {
					removeCheckedInSimple()
				}
				break
			case 'select':
				const flag = m.label === t('全选')
				if (tab === 'all') {
					toggleCheckedAllInAll(flag)
				} else {
					toggleCheckedAllInSimple(flag)
				}
				break
		}
		onCancel()
	}

	return (
		<StyledMenuWrap ref={ref} {...restProps}>
			<ul className="menu" id="user-menu__i18n">
				{menu
					.filter((m) => m.canShow)
					.map((m, i) => (
						<li key={m.id} onClick={() => handleClick(m)}>
							{m.label}
						</li>
					))}
			</ul>
		</StyledMenuWrap>
	)
})
